import { Component, OnInit } from '@angular/core';
import {HttpService} from '../http.service';
import {Student} from '../student';
import {EChartOption, ECharts} from 'echarts';

@Component({
  selector: 'app-age-table',
  templateUrl: './age-table.component.html',
  styleUrls: ['./age-table.component.css']
})
export class AgeTableComponent implements OnInit {

  constructor(private http: HttpService, ) { }
  yearList: number[][] = [[0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0]];
  YearList: number[] = [];
  age: number;
  AgeList: number[] = [0, 0, 0, 0, 0, 0, 0];
  majorData: string [] = ['信息管理与信息系统', '市场营销学', '国际经济与贸易', '金融学', '会计学'];
  majorPeopleData: number [] = [0, 0, 0, 0, 0];
  maleData: number[] = [0, 0, 0, 0, 0];
  femaleData: number[] = [0, 0, 0, 0, 0];
  option: EChartOption = {};
  chartOption: EChartOption = {};
  chartOpt: ECharts;
  chartOpt1: ECharts;
  panel2 = [
    {
      active: false,
      disabled: false,
      name: '专业出生年份',
    }
  ];
  panel1 = [
    {
      active: false,
      disabled: false,
      name: '各专业人数分布',
    }
  ];
  students: Student[] = [];
  chartOption1: EChartOption = {
    title: {
      text: '学生年龄统计',
      left: 'center'
    },
    xAxis: {
      type: 'category',
      data: ['19', '20', '21', '22', '23', '24', '25'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: this.AgeList,
        type: 'line',
      },
    ],
  };
  onChartInit(event) {
    this.chartOpt = event;
    this.chartOpt.showLoading();
  }
  onChartInit1(event) {
    this.chartOpt1 = event;
    this.chartOpt1.showLoading();
  }
  getYear(studentlist) {
    for (const i in studentlist) {
      if (studentlist[i].birthday.slice(0, 4) === '1996') {
        for (const k in this.majorData) {
          if (studentlist[i].major === this.majorData[k]) {
            this.yearList[k][0] += 1;
          }
        }
      }
      if (studentlist[i].birthday.slice(0, 4) === '1997') {
        for (const k in this.majorData) {
          if (studentlist[i].major === this.majorData[k]) {
            this.yearList[k][1] += 1;
          }
        }
      }
      if (studentlist[i].birthday.slice(0, 4) === '1998') {
        for (const k in this.majorData) {
          if (studentlist[i].major === this.majorData[k]) {
            this.yearList[k][2] += 1;
          }
        }
      }
      if (studentlist[i].birthday.slice(0, 4) === '1999') {
        for (const k in this.majorData) {
          if (studentlist[i].major === this.majorData[k]) {
            this.yearList[k][3] += 1;
          }
        }
      }
      if (studentlist[i].birthday.slice(0, 4) === '2000') {
        for (const k in this.majorData) {
          if (studentlist[i].major === this.majorData[k]) {
            this.yearList[k][4] += 1;
          }
        }
      }
    }
    console.log('人数' + this.yearList);
    this.chartOption = {
      // title: {
      //   left: 'center',
      //   text: '各专业学生出生年份统计'
      // },
      legend: {
        orient: 'vertical',
        left: 'right',
        data: ['信息管理与信息系统', '市场营销学', '国际经济与贸易', '金融学', '会计学']
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['1996', '1997', '1998', '1999', '2000'],
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '信息管理与信息系统',
          type: 'line',
          data: this.yearList[0],
        },
        {
          name: '市场营销学',
          type: 'line',
          data: this.yearList[1],
        },
        {
          name: '国际经济与贸易',
          type: 'line',
          data: this.yearList[2],
        },
        {
          name: '金融学',
          type: 'line',
          data: this.yearList[3],
        },
        {
          name: '会计学',
          type: 'line',
          data: this.yearList[4],
        }
      ]
    };
  }
  getPeopleData(studentList) {
    for (const i in studentList) {
      for (const j in this.majorData) {
        if (studentList[i].major === this.majorData[j]) {
          this.majorPeopleData[j] += 1;
          if (studentList[i].sex === '男') {
            this.maleData[j] += 1;
          } else {
            this.femaleData[j] += 1;
          }
        }
      }
    }
    this.option = {
      // title: {
      //   left: 'center',
      //   text: '人数统计'
      // },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        orient: 'vertical',
        left: 'right',
        data: ['总人数', '男生人数', '女生人数']
      },
      xAxis: {
        type: 'category',
        data: this.majorData
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '总人数',
          type: 'line',
          // step: 'start',
          data: this.majorPeopleData
        },
        {
          name: '男生人数',
          type: 'line',
          // step: 'middle',
          data: this.maleData
        },
        {
          name: '女生人数',
          type: 'line',
          // step: 'end',
          data: this.femaleData
        }
      ]
    };
  }
  getStudents(): void {
    this.http.getStudents().subscribe(
      (res) => {
        res.data.forEach(row => {
          this.students = [...this.students];
          this.students.push( {
              native_place: row.native_place,
              time_of_enrollment: row.time_of_enrollment,
              birthday : row.birthday,
              class : row.class,
              major : row.major,
              name : row.name,
              sex : row.sex,
              stuid : row.stuid
            }
          );
        });
        this.chartOpt.hideLoading();
        this.chartOpt1.hideLoading();
        this.chartOpt.setOption(this.chartOption, true);
        this.chartOpt1.setOption(this.chartOption1, true);
        this.getYear(this.students);
        this.getPeopleData(this.students);
        console.log(this.students);
      });
  }
  ngOnInit(): void {
    this.getStudents();
  }
}
